* {
    margin: 0;
    padding: 0;
}

#app {
    overflow-x: hidden;
    position: relative;
    background-color: #333333;
}

.toggle_btn {
    position: absolute;
    left: -100px;
    top: -100px;
    width: 200px;
    height: 200px;
    background-color: #FF7979;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 1s ease-out;
    z-index: 5;
}

.toggle_btn img {
    position: absolute;
    width: 24px;
    object-fit: cover;
    top: 70%;
    left: -50%;
    transition: left .5s ease-out;
}

.toggle_btn .menu {
    left: 60%;
}

.main {
    width: 100vw;
    background-color: #fff;
    min-height: 100vh;
    padding-top: 100px;
    transform-origin: top left;
    transition: transform .5s ease-out;
}

.main.rotate {
    transform: rotate(-20deg);
}

.main .w {
    width: 60%;
    margin: 0 auto;
}

.main h1 {}

.main small {
    color: #555;
    font-style: italic;
}

.main p {
    color: #333;
    line-height: 1.5;
    margin: 20px 0;
}

.main img {
    width: 100%;
    margin-top: 10px;
}

.nav {
    display: none;
    /* opacity: 0; */
    position: fixed;
    bottom: 100px;
    left: 0px;
    color: #fff;
}

.nav .nav_item {
    margin-bottom: 20px;
    cursor: pointer;
}

.nav .nav_item:nth-child(2) {
    padding-left: 10px;
}

.nav .nav_item:nth-child(3) {
    padding-left: 20px;
}

.nav.show {
    display: block;
    animation: nav_show 1s linear;
    animation-fill-mode: forwards;
}

@keyframes nav_show {
    0% {
        opacity: 0;
    }
    100% {
        left: 30px;
    }
}